<template>
   <div id="gouwu">
      <div class="title">
          <mt-header title="拿货车">
            <mt-button slot="right" @click="manage">{{title}}</mt-button>
          </mt-header>
      </div>
     <transition>
        <div class="btn" v-if="show">
           <button @click="btton">删除</button>
        </div>
     </transition>
     <div class="content">
       <p>
         <span class="mui-icon mui-icon-extra mui-icon-extra-cart"></span>
         <span>什么都没有，赶紧<router-link :to="names.path">{{names.name}}</router-link>去吧</span>
       </p>
     </div>
   </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      show: false,
      title: "管理",
      names: { path: "/home/Guangdong", name: "购物" }
    };
  },
  methods: {
    manage() {
      this.show = !this.show;
      if (this.title == "管理") {
        this.title = "取消";
      } else {
        this.title = "管理";
      }
    },
    btton() {
      Toast({
        message: "请选择商品",
        position: "bottom",
        duration: 4000
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.title {
  width: 100%;
  height: 63px;
  .mint-header {
    width: 100%;
    height: 63px;
    font-size: 18px;
    background: #c6091b;
  }
}
.btn {
  width: 100%;
  background: white;
  height: 40px;
  position: relative;
  button {
    position: absolute;
    right: 3px;
    top: 4px;
    border-radius: 25px;
    width: 60px;
    color: grey;
  }
}
.v-enter {
  opacity: 0;
  transform: translateX(-100%);
}
.v-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}
.v-enter-active,
.v-leave-active {
  opacity: 1;
  transition: all 0.8s;
}
.content {
  width: 100%;
  height: 400px;
  position: relative;
  // background: red;
  p {
    position: absolute;
    top: 60%;
    left: 22%;
  }
}
</style>
